<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="top-box">
					<view class="screen-box flexWrapNo">
						<view class="address-wrap flexWrapNo" @tap="toggleArea()">
							{{currentPosition}}
							<image src="../../static/index/up-icon.png" class="wrap-icon" v-if="areaFlag"></image>
							<image src="../../static/index/down-icon.png" class="wrap-icon" v-else></image>
						</view>
						<view class="search-box flexWrapNo">
							<image src="../../static/index/search-icon.png" class="search-icon"></image>
							<input placeholder="搜索店名" placeholder-class="placeholderClass" v-model="keywords" @input="getStoreList()"/>
						</view>
					</view>
					<view class="address-box flexWrapNo" v-if="areaFlag">
						<view class="address-item" v-for="(item,index) in areaList" :key="index" :class="{active:areaIndex==index}" @tap="changeArea(index)">
							{{item.shortname}}
						</view>
					</view>
				</view>
				<view class="sort-box flexWrapNo"  v-if="roles!=0&&roles!=2&&roles!=3">
					排序
					<view class="sort-item flexWrapNo" @tap="changeType(0)">
						开业时间
						<view class="triangle-box flexWarpCenterColumn">
							<text class="triangle up" :class="{active:type==0&&!sortFlag}"></text>
							<text class="triangle" :class="{active:type==0&&sortFlag}"></text>
						</view>
					</view>
					<view class="sort-item flexWrapNo" @tap="changeType(1)">
						订单总额
						<view class="triangle-box flexWarpCenterColumn">
							<text class="triangle up" :class="{active:type==1&&!sortFlag}"></text>
							<text class="triangle" :class="{active:type==1&&sortFlag}"></text>
						</view>
					</view>
					<view class="sort-item flexWrapNo" @tap="changeType(2)">
						今日订单
						<view class="triangle-box flexWarpCenterColumn">
							<text class="triangle up" :class="{active:type==2&&!sortFlag}"></text>
							<text class="triangle" :class="{active:type==2&&sortFlag}"></text>
						</view>
					</view>
				</view>
				<!-- <view class="statistics-box" @tap="goPage('/early-warning/warning')" v-if="roles==5">
					<view class="statistics-top flexWrap">
						<view class="flexWrapNo">收入预警 
							<text class="bonus-date">跟新日期:2023-10-10</text>
						</view>
						<view class="details">查看详情 <text class="icon-more"></text> </view>
					</view>
					<view class="statistics-cont flexWrap">
						<view class="statistics-item  flexWarpCenterColumn">
							<view>{{devidenInfo.totalDividend||0}}</view>
							<view class="statistics-text">昨日预警</view>
						</view>
						<view class="statistics-item  flexWarpCenterColumn">
							<view>{{devidenInfo.issued||0}}</view>
							<view class="statistics-text">昨日占比</view>
						</view>
						<view class="statistics-item  flexWarpCenterColumn">
							<view>{{devidenInfo.toBeIssued||0}}</view>
							<view class="statistics-text">8月预警</view>
						</view>
						<view class="statistics-item  flexWarpCenterColumn">
							<view>{{devidenInfo.toBeIssued||0}}</view>
							<view class="statistics-text">8月占比</view>
						</view>
					</view>
				</view> -->
				<view class="statistics-box" v-if="isHasMini"  @tap="goPage('/micro-shareholder/selfMicroShareholder')">
					<view class="statistics-top flexWrap">
						<view class="flexWrapNo">微股东分红 
							<!-- <text class="bonus-date">开始分红日期:2023-10-10</text> -->
						</view>
						<view class="details">查看详情 <text class="icon-more"></text> </view>
					</view>
					<view class="statistics-cont flexWrap">
						<view class="statistics-item statistics-item2 flexWarpCenterColumn">
							<view>{{devidenInfo.totalDividend||0}}</view>
							<view class="statistics-text">总分红</view>
						</view>
						<view class="statistics-item statistics-item2 flexWarpCenterColumn">
							<view>{{devidenInfo.issued||0}}</view>
							<view class="statistics-text">已发放</view>
						</view>
						<view class="statistics-item statistics-item2 flexWarpCenterColumn">
							<view>{{devidenInfo.toBeIssued||0}}</view>
							<view class="statistics-text">待发放</view>
						</view>
					</view>
				</view>
				<view class="statistics-box" v-if="roles!=0&&roles!=2&&roles!=3">
					<view class="statistics-top flexWrap">
						<view>综合统计</view>
						<view class="details" @tap="goPage('/pages/index/orderStatistics')">查看详情 <text class="icon-more"></text> </view>
					</view>
					<view class="statistics-cont flexWrap">
						<view class="statistics-item flexWarpCenterColumn">
							<view>{{order_data.store_num||0}}</view>
							<view class="statistics-text">店铺总数</view>
						</view>
						<view class="statistics-item flexWarpCenterColumn">
							<view>{{order_data.order_count||0}}</view>
							<view class="statistics-text">今日订单</view>
						</view>
						<view class="statistics-item flexWarpCenterColumn">
							<view>{{order_data.tatal_income||0}}</view>
							<view class="statistics-text">订单总额</view>
						</view>
						<view class="statistics-item flexWarpCenterColumn">
							<view>{{order_data.quantity||0}}</view>
							<view class="statistics-text">开台时长</view>
						</view>
					</view>
				</view>
				<view class="store-box">
					<view class="store-item" v-for="(item,index) in storeList" :key='index' @tap="goShopDetails(item)">
						<view class="shop-info-box flexWrap">
							<view class="shop-info flexWarpColumn">
								<view  class="flexWrapNo">
									<view class="shop-name">{{item.shop_name}}</view>
									<view class="status" :class="{'repair-status':item.store_status_data!='business'}">
										<block v-if="item.store_status_data=='business'">营业中</block>
										<block v-else-if="item.store_status_data=='rest'">休息中</block>
										<block v-else>筹备中</block>
									</view>
								</view>
								<view class="shop-address">{{item.location}}</view>
							</view>
							<view class="boss-img">
								<image src="../../static/index/bossImg.png"></image>
							</view>
						</view>
						<view class="profit-box flexWrap" v-if="item.isExpiration">
							<view class="profit-item flexWrap">
								<text class="profit-text">今日订单</text>
								<text>{{item.count}}</text>
							</view>
							<view class="profit-line"></view>
							<view class="profit-item flexWrap">
								<text class="profit-text">订单总额</text>
								<text>{{item.money.toFixed(2)||0}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="invest-image">
						<image src="/static/index/invest.png"></image>
					</view> -->
				</view>
				<!-- <view class="guide-box" @tap="goPage('/pages/index/webView?user_id='+user_id)" v-if="(!open_id_public||open_id_public=='')||is_follow==0">
					点击关注公众号并授权,订单、关注早知道!
				</view> -->
				<view class="model-box" v-if="modelFlag">
					<view class="close-btn" @tap.stop="closeModel()">
						<image src="/static/user/close.png"></image>
					</view>
					<view class="model-tips flexWarpCenterColumn">
						<text class="welcome">{{noteTitle}}</text>
						<text>{{noteTime}}</text>
					</view>
					<view class="model-cont">
						<u-parse :content="maincontent" v-if="maincontent"/>
					</view>
					<view class="btn"  @tap.stop="readNote()">确认</view>
					<view class="tips">
						此通知必须确认，否则会再次弹出
					</view>
				</view>
				<view class="mask-wrap" v-if="modelFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue';
	export default {
		components: {
			uParse
		},
		data() {
			return {
				pageOpc:0,
				storeList:[],
				areaList:[],
				areaIndex:-1,
				areaFlag:false,
				keywords:"",
				city_id:0,
				currentPosition:"全部",
				type:0,
				sortFlag:false,
				order_data:{},
				officialFlag:false,
				user_id:"",
				open_id_public:"",
				is_follow:0,
				modelFlag:false,
				noteTitle:"",
				noteTime:"",
				maincontent:"",
				noteId:"",
				isExpiration:true,//是否分红到期
				identity:1,
				devidenInfo:{},
				isHasMini:false,
				roles:1
			}
		},
		onLoad() {
			this.getCity();
			this.getStoreList();
			// 获取分红统计数据
			// this.getdividendStat()
		},
		onShow() {
			this.detectionPassword();
			this.getIndexDialog();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.getStoreList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			closeofficialFlag(){
				this.officialFlag=false
			},
			showofficialFlag(){
				this.officialFlag=true
			},
			showModel(){
				this.modelFlag=true
			},
			closeModel(){
				this.modelFlag=false
			},
			readNote(){
				this.$request.post(this.$api.indexReadingRecords, {
					notice_id:this.noteId
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						this.$tools.showToast('操作成功')
						this.closeModel();
					}
				})
			},
			detectionPassword(){
				this.$request.post(this.$api.detectionPassword, {
					
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						if(data.password_low==1){
							uni.showModal({
								title:'提示',
								content:'检测到当前密码安全系数过低，请修改',
								showCancel:false,
								success: (res) => {
									if(res.confirm){
										uni.navigateTo({
											url:'/pages/user/userInfo?show=1'
										})
									}
								}
							})
						}
					}
				})
			},
			changeType(index){
				let prveIndex = this.type
				this.type=index
				if (index != prveIndex){
					this.sortFlag=false
				}else{
					this.sortFlag=!this.sortFlag
				}
				this.getStoreList();
			},
			// 选择地区
			changeArea(index){
				this.areaIndex=index
				this.city_id=this.areaList[index].id
				this.currentPosition=this.areaList[index].shortname
				this.getStoreList();
				this.toggleArea();
			},
			// 地区筛选的显示隐藏
			toggleArea(){
				this.areaFlag=!this.areaFlag
			},
			getCity(){
				this.$request.post(this.$api.cityList, {
					
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let areaItem={
							id:0,
							shortname:"全部"
						}
						this.areaList=data.area_list
						this.areaList.unshift(areaItem);
					}
				})
			},
			// 店铺列表
			getStoreList(){
				this.$request.post(this.$api.storeList, {
					keywords:this.keywords,
					city:this.city_id,
					sort_type:Number(this.sortFlag),
					sort:Number(this.type+1)
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data.order_data){
							this.storeList=data.storeList
							this.order_data=data.order_data
						}else{
							this.storeList=data
						}
						this.roles=data.user_info.roles
						for (let i in this.storeList) {
							this.storeList[i].identity=this.identityIncludes(this.storeList[i].roles)
							this.storeList[i].isExpiration=true
							if(this.storeList[i].identity!=1&&this.storeList[i].identity!=4){
								if(this.storeList[i].dividend_date){
									this.storeList[i].isExpiration=this.areDatesEqual(this.storeList[i].dividend_date)
								}else{
									this.storeList[i].isExpiration=false
								}
							}
						}
						this.isHasMini= this.storeList.some(item => item.is_mini ===1)
						console.log(this.storeList)
						this.user_id=data.user_info.user_id
						this.open_id_public=data.user_info.open_id_public
						this.is_follow=data.user_info.is_follow
						uni.setStorageSync('storeNum', this.storeList.length)
						uni.setStorageSync('mobile', data.user_info.mobile)
						uni.setStorageSync('username',data.user_info.username)
						uni.setStorageSync('roles',this.roles)
						// console.log(this.identityIncludes(data.user_info.roles))
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			areDatesEqual(date) {
			  return new Date().getTime() >= new Date(date).getTime();
			},
			identityIncludes(roles){
				console.log(roles)
				let rolesList=roles.split(',').map(item=>Number(item))
				let identity=null
				if(rolesList.includes(1)||rolesList.includes(5)){
					identity=1//最高权限
					return identity;
				}else if(rolesList.includes(4)){
					identity=4//商务
					return identity;
				}else if(rolesList.includes(6)){
					identity=6//微股东
					return identity;
				}else if(rolesList.includes(2)||rolesList.includes(3)){
					identity=2//保洁、运维
					return identity;
				}else{
					identity=6//没有任何身份
					return identity;
				}
			},
			// 进入店铺详情
			goShopDetails(item){
				if(!item.isExpiration&&item.identity==6){
					this.$tools.showToast('未开始分红，暂无数据')
					return;
				}
				uni.setStorageSync('store_id',item.id)
				uni.setStorageSync('identity',item.identity)
				uni.setStorageSync('is_mini',item.is_mini)
				if((item.identity==6||(item.is_mini==1&&item.identity!=4))&&item.identity!=1){
					console.log('存')
					uni.setStorageSync('dividend_date',item.dividend_date)
					uni.setStorageSync('dividend_by',item.dividend_by)
					uni.setStorageSync('cooperation_period',item.cooperation_period)
				}else{
					console.log('不存')
					uni.setStorageSync('dividend_date',"")
				}
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getIndexDialog(){
				this.$request.post(this.$api.getIndexDialog, {
					
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data.length==0){
							this.modelFlag=false
							return;
						}
						this.noteId=data.id
						this.noteTitle=data.titile
						this.noteTime=this.$tools.formatDate(data.createtime)
						this.maincontent=data.maincontent
						this.modelFlag=true
					}
				})
			},
			
			// 获取分红统计数据
			getdividendStat(){
				this.$request.post(this.$api.dividendStat, {
					adminId:uni.getStorageSync('user_id'),
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.devidenInfo = data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding:0 34upx;
		padding-bottom: 100upx;
	}
	.guide-box{
		background: #1D1C5C;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: 100upx;
		line-height: 100upx;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		justify-content: center;
		z-index: 998;
		color: #FFFFFF;
		font-size:28upx;
		text-align: center;
	}
	.top-box{
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #040336;
		.screen-box{
			padding-bottom: 20rpx;
			.address-wrap{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				width: 160rpx;
				height: 80rpx;
				background: rgba(0,0,0,0.15);
				border-radius:16rpx;
				border: 2rpx solid rgba(255,255,255,0.25);
				justify-content: center;
				.wrap-icon{
					width: 34rpx;
					height: 34rpx;
					margin-left: 16rpx;
				}
			}
			.search-box{
				height:80rpx;
				background: rgba(0,0,0,0.15);
				border-radius:16rpx;
				border: 2rpx solid rgba(255,255,255,0.25);
				margin-left: 28rpx;
				padding-left: 28rpx;
				.search-icon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
				input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color:#FFF;
					width: 400rpx;
				}
				.placeholderClass{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color:#807F99;
				}
			}
		}
	}
	.sort-box{
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60upx;
		color: #FFFFFF;
		justify-content:flex-end;
		margin-top: 10upx;
		.sort-item{
			margin-left: 25upx;
		}
		.triangle-box{
			.triangle{
				border-top-color: #FFFFFF;
			}
			.up{
				transform: rotate(180deg);
				margin-bottom: 10upx;
			}
			.active{
				border-top-color: #26BCFD;
			}
		}
	}
	.address-box{
		flex-wrap: wrap;
		background-color: #040336;
		z-index: 999;
		padding-top: 30rpx;
		.address-item{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #1D1C5C;
			border-radius: 63rpx 63rpx 63rpx 63rpx;
			margin-right: 90rpx;
			margin-bottom: 20rpx;
			&:nth-of-type(3n){
				margin-right: 0;
			}
		}
		.active{
			background: #26BCFD;
		}
	}
	.statistics-box{
		background: #1D1C5C;
		border-radius: 16rpx;
		padding: 12upx;
		margin-top: 20upx;
		.statistics-top{
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			padding: 20upx 14upx;
			.bonus-date{
				margin-left: 20upx;
				font-size: 24upx;
				font-weight: 500;
				color: #fc750d;
			}
			.details{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color:#656590;
			}
			.icon-more{
				border-color: #FFF;
			}
		}
		.statistics-cont{
			.statistics-item{
				width: 158rpx;
				height: 152rpx;
				background: #353484;
				border-radius:8rpx;
				justify-content: center;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				.statistics-text{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #9898C1;
					margin-top: 12upx;
				}
			}
			.statistics-item2{
				width: 212rpx;
			}
		}
	}
	
	.store-box{
		.store-item{
			margin-top:20upx;
			border-radius: 16upx;
			overflow: hidden;
			.shop-info-box{
				height: 160upx;
				background:#1D1C5C;
				border-radius: 16upx 16upx 0 0;
				padding: 0 30upx;
				align-items: flex-end;
				.shop-info{
					justify-content: center;
					height: 100%;
					.shop-name{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 50upx;
						color: #FFFFFF;
					}
					.status{
						width: 112upx;
						height: 40pux;
						line-height: 40upx;
						background: #2CA522;
						border-radius: 36upx;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						margin-left: 10upx;
					}
					.repair-status{
						background:#fc750d;
					}
					.shop-address{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color:#8281A5;
						margin-top: 10upx;
					}
				}
				.boss-img{
					width: 164upx;
					height: 164upx;
					flex: none;
				}
			}
			.profit-box{
				height: 120upx;
				background:#FFFFFF;
				border-radius: 0px 0px 16upx 16upx;
				.profit-line{
					width: 2upx;
					height: 100%;
					border-left: 1rpx dashed #555585;
				}
				.profit-item{
					font-size: 40upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 66upx;
					color: #040336;
					flex: 1;
					padding: 0 26upx;
					.profit-text{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34upx;
						color: #8E8DAD;
						margin-right: 15upx;
					}
				}
			}
		}
		.invest-image{
			height: 100upx;
			margin-top: 30upx;
		}
	}
	.model-box{
		height: 976upx;
		background:#1A195F;
		border-radius: 16upx;
		margin-top: 340upx;
		position: fixed;
		left: 40upx;
		right: 40upx;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: 999;
		.close-btn{
			width: 48upx;
			height: 48upx;
			top: 20upx;
			right: 20upx;
			position: absolute;
		}
		.model-tips{
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #FFFFFF;
			padding-top: 50upx;
			.welcome{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 66upx;
				color: #FFFFFF;
				margin-bottom: 10upx;
			}
		}
		.model-cont{
			padding:0 56upx;
			position: relative;
			z-index: 99;
			height: 570upx;
			overflow-y: scroll;
			font-size:24upx;
			margin-top:10upx;
		}
		.btn{
			width: 322rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
			margin-top:30upx;
		}
		.tips{
			text-align: center;
			font-size:24upx;
			color:#FFF;
			margin-top:30upx;
		}
		.model-Bg{
			height: 384upx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
</style>
